<script setup lang="ts">
import { SizebarContainer } from "@/models/containers";
import Dynamic from "@/components/Dynamic.vue";
import { ref } from "vue";

const props = defineProps<{ model: SizebarContainer }>();
const model = props.model;

const opened = ref(false);
function onMarkClick() {
  opened.value = !opened.value;
}

let openBtnPosition = "top-left";
if (model.props.size && model.props.size == "right") {
  openBtnPosition = "top-right";
}
</script>

<template>
  <div class="pybi-sizebar" data-pybi-auto-width>
    <q-drawer
      v-model="opened"
      v-bind="model.props"
      style="padding: 2rem 0.8rem"
    >
      <q-scroll-area class="fit" style="height: 100%">
        <Dynamic
          :component="cp"
          v-for="cp in props.model.children"
          :key="cp.id"
        ></Dynamic>
      </q-scroll-area>

      <q-page-sticky position="top-right" :offset="[5, 5]">
        <q-btn round icon="close" @click="onMarkClick" size="xs"></q-btn>
      </q-page-sticky>
    </q-drawer>

    <q-page-sticky :position="openBtnPosition" :offset="[5, 18]">
      <q-btn
        v-show="!opened"
        round
        icon="menu_open"
        @click="onMarkClick"
        size="xs"
      ></q-btn>
    </q-page-sticky>
  </div>
</template>

<style scoped lang="less"></style>
